<script setup>
import { onMounted, ref } from 'vue'
import { gethot } from '@/api/goodAPI'
import container from '@/components/container.vue'
const hotlist = ref([])
onMounted(async () => {
  const res = await gethot()
  hotlist.value = res.data.result
})
</script>
<template>
  <container>
    <template #title>人气推荐</template>
    <template #desc>都是大牌，爱买不买</template>
    <template #main
      ><div class="hot">
        <ul class="right">
          <li v-for="ele in hotlist" :key="ele.id">
            {{ ele.title }}
            <img v-img-lazy="ele.picture" alt="" />
          </li>
        </ul></div
    ></template>
  </container>
</template>
<style lang="scss" scoped>
.hot {
  margin-top: 20px;
  .right {
    display: flex;
    flex: 1;
    justify-content: space-between;
    li {
      margin: 20px;
      font-size: 20px;
      text-align: center;
      line-height: 40px;
      margin-top: 0px;
      color: red;
    }
  }
}
</style>
